<template>
	<view class="page">

		<!-- 状态背景 -->
		<view class="bar_background" :class="isBang?'bar_backgroundx':'bar_background'">

			<view class="top box">
				<view class="iconfont iconfanhui flex-1" @tap='back'>
				</view>
				<view class="title flex-1">
					我的
				</view>
				<view class="setting iconfont iconshezhi flex-1" @tap='handleSetting()'>
				</view>
			</view>
			<view class="login box d-ai-c mt-2">
				 <view class="box d-ai-c" v-if="!loginState" @tap="login">
					<view class="box d-ai-c">
						<image src="../../static/images/user/tx.png"></image>
					</view>
					<view class="right">
						<view class="">
							登录/注册
						</view>
						<view class="">
							点击登录，查看更多精彩内容
						</view>
					</view>
				</view>

				<view class="box d-ai-c"  v-if="loginState">
					<view class="box d-ai-c" @tap='userEdit'>
						<image  :src="userInfo.userInfo.image" ></image>
					</view>
					<view class="right" @tap='userEdit'>
						<view class="right-role">
							<view>{{userInfo.userInfo.nickName}}</view>
							<!-- <view class="" v-if="userInfo.userInfo.roles.length!==0">
								老师
								<image class="roleplay" v-if="userInfo.userInfo.roles.indexOf('teacher')>-1&&userInfo.userInfo.roles.length===1" src="../../static/images/user/laoshi@2x.png"></image>
								教务
								<image v-if="userInfo.userInfo.roles.indexOf('teacher_leader')>-1&&userInfo.userInfo.roles.length===1" class="roleplay" src="../../static/images/user/jiaowu@2x.png" mode=""></image>
								老师 教务 展示教务
								<image v-if="userInfo.userInfo.roles.indexOf('teacher')>-1&&userInfo.userInfo.roles.indexOf('teacher_leader')>-1&&userInfo.userInfo.roles.length===2" class="roleplay" src="../../static/images/user/jiaowu@2x.png" mode=""></image>
								老师 教务 团长 展示教务
								<image v-if="userInfo.userInfo.roles.indexOf('teacher')>-1&&userInfo.userInfo.roles.indexOf('teacher_leader')>-1&&userInfo.userInfo.roles.indexOf('unity_leader')>-1" class="roleplay" src="../../static/images/user/tz@2x.png" mode=""></image>
								团长
								<image v-if="userInfo.userInfo.roles.indexOf('unity_leader')>-1&&userInfo.userInfo.roles.length===1" class="roleplay" src="../../static/images/user/tz@2x.png" mode=""></image>
							</view> -->
						</view>
						<view class="">
							{{userInfo.userInfo.phone}}
						</view>
					</view>
					<!-- 学生证 -->
					<image v-if="userInfo.userInfo.roles.indexOf('student')>-1" class="xsz" src="../../static/images/user/xsz@2x.png" mode="" @tap="jumpToStudent"></image>
				</view>

			</view>

		</view>
		<view class="box-c d-ai-c">
			<view class="card mb-2 box d-jc-sa" v-if='loginState'>
				<view class="integral box-c d-ai-c d-jc-c d-ac-c flex-12">
					<view class="">
						{{userInfo.userInfo.accumulatePoints}}
					</view>
					<view class="">
						我的积分
					</view>
				</view>
				<view class="box d-jc-c d-ai-c flex-1">
						<view class="line"></view>
				</view>
				<view class=" integral box-c d-ai-c flex-12">
					<view class="">
					{{userInfo.userInfo.signIntegral}}
					</view>
					<view class="">
						奖励积分
					</view>
				</view>
			</view>
			<view class="card box d-f-wrap">
				<view class="box-c d-ai-c title" @tap="payIntegral">
					<view class="iconfont iconchongzhijifen"></view>
					<view class="">充值积分</view>
				</view>
				<view class="box-c d-ai-c title" @tap='myiItegral'>
					<view class="iconfont iconjifenjilu"></view>
					<view class="">积分记录</view>
				</view>
				<view class="box-c d-ai-c title"  @tap="myOrder">
					<view class="iconfont iconwodedingdan"></view>
					<view class="">我的订单</view>
				</view>
				<view class="box-c d-ai-c title"  @tap="myAddress">
					<view class="iconfont iconshouhuodizhi"></view>
					<view class="">收货地址</view>
				</view>
			</view>
			<view class="" v-if="loginState">
				<view class="card-b" v-show="userInfo.userInfo.roles.includes('student')===true||userInfo.userInfo.roles.includes('teacher')===true||userInfo.userInfo.roles.includes('teacher_leader')===true">
					<view class="card-title">
						老年大学
					</view>
					<view class="card box d-f-wrap">
						<view class="box-c d-ai-c title"  @tap="lessonOrder">
							<view class="iconfont iconkechengdingdan"></view>
							<view class="">课程订单</view>
						</view>
						<view class="box-c d-ai-c title" @tap="mySchedule" v-if="userInfo.userInfo.roles.includes('student')===true">
							<view class="iconfont iconkechengbiao"></view>
							<view class="">课程表</view>
						</view>
					
						<view class="box-c d-ai-c title" @tap="approleave" v-if="userInfo.userInfo.roles.includes('student')===true">
							<view class="iconfont iconqingjia"></view>
							<view class="">请假</view>
						</view>
						<view class="box-c d-ai-c title"  @tap="myclass" v-if="userInfo.userInfo.roles.includes('teacher')===true||userInfo.userInfo.roles.includes('teacher_leader')===true">
							<view class="iconfont iconwodebanji"></view>
							<view class="">我的班级</view>
						</view>
						<view class="box-c d-ai-c title" @tap="approval"  v-if="userInfo.userInfo.roles.includes('teacher')===true||userInfo.userInfo.roles.includes('teacher_leader')===true">
							<view class="iconfont iconshenpi"></view>
							<view class="">审批</view>
						</view>
					
						<view class="box-c d-ai-c title"  v-if="userInfo.userInfo.roles.includes('teacher_leader')===true" @tap="Informion">
							<view class="iconfont iconshenpi"></view>
							<view class="">教务通知</view>
						</view>
					</view>
				</view>
				<view class="card-b">
					<view class="card-title">
						活动中心
					</view>
					<view class="card box d-f-wrap">
						<view class="box-c d-ai-c title" @tap="activityApply">
							<view class="iconfont iconhuodong"></view>
							<view class="">报名活动</view>
						</view>
						<view class="box-c d-ai-c title"  v-if="userInfo.userInfo.roles.includes('activity_unity_leader')===true||userInfo.userInfo.roles.includes('plate_unity_leader')===true" @tap="activityApplyCheck">
							<view class="iconfont iconSE0051"></view>
							<view class="">报名审核</view>
						</view>
						<view class="box-c d-ai-c title"  v-if="loginState" @tap="activityTeam">
							<view class="iconfont iconbaomingtuandui-01"></view>
							<view class="">报名团队</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		props: {
			visible: Boolean
		},
		components: {
			hansTabber
		},
		computed: mapState(['loginState', 'userInfo']),
		data() {
			return {
				current1: 3,
				user: {},
				testdata: {},
				getUserIn: '',
				top: 0,
				isBang:false,
				getcard:''
			}
		},

		onShow() {
			this.getUserInfo()
			// this.studentcard()
		},
		onLoad() {
			if (uni.getStorageSync("isBang")) {
				this.isBang = true
			}
			// this.studentcard()
		},
		methods: {
			...mapMutations(['logout', 'setUserInfo']),
			//用户活动报名记录
			activityApply(){
				uni.navigateTo({
					url:'../activity/apply-record'
				})

			},
			//活动报名审核
			activityApplyCheck(){
				uni.navigateTo({
					url:'../activity/apply-check'
				})

			},
			//报名团队
			activityTeam(){
				uni.navigateTo({
					url:'../teamcenter/teamRecord'
				})

			},
			handleSetting(){

				uni.navigateTo({
					url:'/pages/user/setting',
					animationDuration: 350
				})
			},
			userEdit() {
				uni.navigateTo({
					url: 'userEdit'
				});


			},
			// 获取用户信息
			getUserInfo() {

				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
						console.log("======="+JSON.stringify(this.userInfo))
					}

				})

			},
			changeStatus() {
				uni.showToast({
					title: '功能暂未开放',
					duration: 2000,
					icon: "none"
				})
				//修改tabbar
				// uni.setTabBarItem({
				// 	index: 0,
				// 	pagePath: 'pages/volunteer/hire-list',
				// 	text: "111"
				// })
				// uni.navigateTo({
				// 	url: '../volunteer/hire-list'
				// })
			},
			async mySchedule() {
				let res = await this.$api.checkLogin();
				if (res.data.success) {
					uni.navigateTo({
						url: './sign-schedule'
					});
				}

			},
			myQR() {
				uni.navigateTo({
					url: './userQR'
				});
			},
			myiItegral() {
				if(this.loginState){
					uni.navigateTo({
						url: '../integral/integral',
						animationType: 'pop-in',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}

			},
			payIntegral() {
				if(this.loginState){
					uni.navigateTo({
						url: '../pay/pay',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}

			},
			myclass() {
				if(this.loginState){
					uni.navigateTo({
						url: '../teacher/myclass',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}

			},
			myAddress() {
				if(this.loginState){
					uni.navigateTo({
						url: '../address/address',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}

			},
			lessonOrder() {
				if(this.loginState){
					uni.navigateTo({
						url: '../lesson/lesson',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}

			},
			myOrder() {
				if(this.loginState){
					uni.navigateTo({
						url: '../order/order',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}

			},
			approval() {
				if(this.loginState){
					uni.navigateTo({
						url: '../approval/approval',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}

			},
			approleave(){
				if(this.loginState){
					uni.navigateTo({
						url: '../approleave/approleave',
						animationDuration: 350
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/login',
						animationDuration: 350
					});
				}
			},
			otherFun(object) {
				if (!!object) {
					console.log(object)
				}
			},
			back() {
				uni.navigateTo({
					url:'/pages/index/index',
					animationDuration: 350
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/user/login',
					animationDuration: 350
				});
			},
			bindLogin() {
				let _this = this
				uni.showModal({
					title: '退出登录',
					content: '确认退出当前账号？',
					success: function(res) {
						if (res.confirm) {
							_this.logout()
						} else if (res.cancel) {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: "none"
							})
						}
					}
				});

				// this.getUserInfo()
			},
			//弹框
			Informion(){
				uni.navigateTo({
					url:'/pages/message/myissue',
					animationDuration: 350
				})
			},
			//学生证
			studentcard(){
				this.$api.studentcard().then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.getcard = res.data.dataMap
					}
				})
			},
			//跳转学生证页面
			jumpToStudent(){
				this.studentcard()
				setTimeout(()=>{
					if(this.getcard.length===0){
						uni.showToast({
							title: '暂无报名班级',
							duration: 2000,
							icon: "none"
						})
					}else{
						console.log(this.getcard)
						uni.navigateTo({
							url:'../studentcard/studentcard'
						})
					}
				},200)


			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background-color: #F8F8F8;
		height: 100%;
	}
	.integral{
		view:nth-child(1){
			font-weight: bold;
			font-size: 36rpx;
		}
		view:nth-child(2){
			font-size: 24rpx;
			color: #666666FF;
		}
	}
	.line{
		height: 60rpx;
		width: 4rpx;
		background-color: #EEEEEEFF;
	}
	.card-b{
		width: 690rpx;
		min-height: 150rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		.card-title{
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			margin-left: 30rpx;
			margin-top: 30rpx;
		}
	}
	.card {
		width: 690rpx;
		min-height: 150rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		&>view{
			width: 132rpx;
			margin: 20rpx 20rpx;
			color: #666666FF;
		}
		.title{
			view:nth-child(1){
				// font-weight: bold;
				color: #FF5551;
				font-size: 36rpx;
			}
			view:nth-child(2){
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}

		}
	}

	.login {
		color: #fff;
		padding: 0 30rpx;
		position: relative;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 100rpx;
		}

		.right {
			margin-left: 25rpx;
			view:nth-child(1) {
				font-size: 34rpx;
			}

			view:nth-child(2) {
				font-size: 24rpx;
				padding: 5rpx 0;
			}
			.right-role{
				display: flex;
				align-items: center;
				.roleplay{
					width: 120rpx;
					height: 43rpx;
				}
			}
		}

		.xsz{
			width: 160rpx;
			height: 66rpx;
			margin-left: 200rpx;
		}

	}

	.top {
		color: #fff;
		padding: var(--status-bar-height) 30rpx 10rpx 30rpx;

		.iconshezhi {
			text-align: right;
			font-size: 40rpx;
		}

		.iconfanhui {
			font-size: 36rpx;
		}

		.title {
			text-align: center;
			font-size: 34rpx;
		}
	}

	.bar_background {
		width: 750rpx;
		height: 300rpx;
		background-image: url(../../static/images/user/bg.png);
		background-size: 750rpx 300rpx;
		margin-bottom: 40rpx;

	}
	.bar_backgroundx {
		width: 750rpx;
		height: 330rpx;
		background-image: url(../../static/images/user/bgx.png);
		background-size: 750rpx 330rpx;
		margin-bottom: 40rpx;

	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

</style>
